<template>
	<view class="configFontsize" :style="'padding-top:' + (topHeight)+'px'">
    <div class="topSearch">
      <div class="content" @click="innerSearch" :style="'width:calc(100% - '+ (topWidth + 5) +'px); height:' + inputHeight +'px'">
        <u-icon size="25" name="search"></u-icon>输入关键字
      </div>
    </div>
    <div class="lineEvery"></div>
    <div class="swiperStyle">
      <u-swiper
              :list="list1"
              @change="change"
              @click="click"
      ></u-swiper>
    </div>
    <div class="lineEvery"></div>
    <div class="funModules">
      <div class="funContent">
        <div class="childsFun" v-for="item in funList" :key="item">
          <div class="funOutSideBox" @click="toAppointPage(item.name)">
            <div>
              <image src="@/static/testImg.png" alt="">
            </div>
            <div>
              {{item.name}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="lineEvery"></div>
    <u-popup :show="shouSign" @close="shouSign = false" mode="center">
            <view>
                <text>出淤泥而不染，濯清涟而不妖</text>
            </view>
		</u-popup>
    <Tabs @changeContent="changeContent" :lists="defaultListArr"/>
    <div class="forTabsContent">
      <div class="outSideBox">
        <div class="boxs" v-for="(item,index) in mockData[defaultIndex].data" :key="index" @click="toDetails(item.name)">
          <div class="topimg">
            <image :src="item.img" alt="" />
          </div>
          <div class="boxstitle">
            {{ item.name }}
          </div>
          <div class="boxsprice">
            ￥{{ item.price }}
          </div>
        </div>
      </div>
    </div>
	</view>
</template>

<script>
import Tabs from '@/compents/tabs';
export default {
  components: {
    Tabs
  },
	data() {
		return {
      inputHeight: 0,
      topHeight: 0,
      topWidth: 0 ,
      shouSign: false,
      defaultIndex: 0,
      defaultListArr: [], 
      list1: [
        'https://cdn.uviewui.com/uview/swiper/swiper1.png',
        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
      ],
      funList: [
        {
          name:'秒杀活动'
        },
        {
          name:'每日拼团'
        },
        {
          name:'领奖中心'
        },
        {
          name:'积分商城'
        },
        {
          name:'每日签到'
        },
        {
          name:'生活家电'
        },
        {
          name:'砍价活动'
        },
        // {
        //   name:'个人中心'
        // },
      ],
      mockData: [
        {
          name: '精选',
          details: '精品推荐',
          ischecked: true,
          data: [
            {
              img: require('@/static/logo.png'),
              name: '手机',
              price: 199.99
            }
          ]
        },
        {
          name: '实惠',
          details: '便宜好货',
          ischecked: false,
          data: [
            {
              img: require('@/static/main-bg.png'),
              name: '外套',
              price: 199.99
            },
            {
              img: require('@/static/logo.png'),
              name: '内裤',
              price: 199.99
            }
          ]
        },
        {
          name: '进口',
          details: '国际自营',
          ischecked: false,
          data: [
            {
              img: require('@/static/logo.png'),
              name: '手机',
              price: 199.99
            },
            {
              img: require('@/static/main-bg.png'),
              name: '鞋套',
              price: 199.99
            },
            {
              img: require('@/static/testImg.png'),
              name: '手套',
              price: 199.99
            }
          ]
        },
        {
          name: '热卖',
          details: '冬季热卖',
          ischecked: false,
          data: [
            {
              img: require('@/static/main-bg.png'),
              name: '外套',
              price: 199.99
            },
            {
              img: require('@/static/logo.png'),
              name: '内裤',
              price: 199.99
            },
            {
              img: require('@/static/testImg.png'),
              name: '溺毙',
              price: 199.99
            },
            {
              img: require('@/static/main-bg.png'),
              name: '鞋套',
              price: 199.99
            }
          ]
        },
      ]
		};
	},
  onLoad() {
    if (uni.getMenuButtonBoundingClientRect() === undefined) {
      this.topHeight = 10
      this.topWidth = -5
      this.inputHeight = 30
      console.log();
    } else {
      let res = uni.getMenuButtonBoundingClientRect()
      this.topHeight = res.top
      this.topWidth = res.width
      this.inputHeight = res.height
    }
  },
  onShow(){
      let arr = []
      for (const item of this.mockData) {
        arr.push({
          name:item.name,
          details:item.details,
          ischecked:item.ischecked
        })
      }
      this.defaultListArr = arr
  },
  methods: {
    toAppointPage(val){
      switch (val) {
        case '秒杀活动':
          uni.navigateTo({
            url: '/pagesSon/homePage/seckillActivty'
          });
          break;

        case '每日拼团':
          uni.navigateTo({
            url: '/pagesSon/homePage/dayPuzzle'
          });
          break;

        case '领奖中心':
          uni.navigateTo({
            url: '/pagesSon/homePage/priceCenter'
          });
          break;

        case '积分商城':
          uni.navigateTo({
            url: '/pagesSon/homePage/pointsShop'
          });
          break;

        case '每日签到':
          this.shouSign = true
          break;

        case '生活家电':
          uni.navigateTo({
            url: '/pagesSon/homePage/dayElectric'
          });
          break;

        case '砍价活动':
          uni.navigateTo({
            url: '/pagesSon/homePage/discountActivty'
          });
          break;

        case '个人中心':
          uni.navigateTo({
            url: '/pagesSon/homePage/seckillActivty'
          });
          break;
      
        default:
          break;
      }
    },
    changeContent(val,item){
      this.defaultIndex = val
      let arr = this.defaultListArr
      if (item.ischecked) {
        return
      } else {
        for (const item of arr) {
          item.ischecked = false
          arr[val].ischecked = true
        }
        this.defaultListArr = arr
      }
    },
    innerSearch(){
      uni.navigateTo({
        url: '/pagesSon/search/search'
      });
    },
    toDetails(val){
      console.log(val);
      
      uni.navigateTo({
        url:`/pagesSon/goodsDetail/goodsdetail?title=${val}`
      })
    },
    change(){},
    click(){}
  },
};
</script>


<style scoped lang="scss">
  @import "@/common/configStyle.scss";

  .configFontsize {
    font-size: $ruyi-config-fontsize;
    background-color: #fff;
  }
  .topSearch {
    width: $ruyi-config-outSideWidth;
    padding: 0 $ruyi-config-outSidePadding;
    .content {
      background-color: $ruyi-config-backColor;
      height: 50rpx;
      line-height: 50rpx;
      display: flex;
      justify-content: center;
      border-radius: 5px;
    }
  }
  .swiperStyle {
    margin-top: $ruyi-config-marginTop;
    width: $ruyi-config-outSideWidth;
    padding: 0 $ruyi-config-outSidePadding;
  }
  .funModules {
    margin-top: $ruyi-config-marginTop;
    width: $ruyi-config-outSideWidth;
    padding: 0 $ruyi-config-outSidePadding;
    .funContent {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      .childsFun {
        width: 25%;
        height: 150rpx;
        display: flex;
        justify-content: center;
        .funOutSideBox {
          width: 100%;
          height: 90rpx;
          text-align: center;
          image {
            width: 90rpx;
            height: 90rpx;
          }
        }
      }
    }
  }
  .forTabsContent {
    width: $ruyi-config-outSideWidth;
    padding: 0 $ruyi-config-outSidePadding;
    background-color: #f9f9f9;
    .outSideBox {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .boxs {
        width: 49%;
        height: 450rpx;
        background-color: #fff;
        margin-bottom: $ruyi-config-marginTop;
        border-radius: 10px;
        overflow: hidden;
        .topimg {
          width: 100%;
          height: 350rpx;
          border-radius: 10px;
          overflow: hidden;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .boxstitle {
          height: 50rpx;
          width: 90%;
          line-height: 50rpx;
          padding: 0 5%;
        }
        .boxsprice {
          color: #f00;
          height: 50rpx;
          width: 90%;
          line-height: 50rpx;
          padding: 0 5%;
          font-size: $ruyi-config-fontBigsize;
          font-weight: $ruyi-config-fontWight;
        }
      }
    }
  }
</style>
